<template>
  <el-dialog
    v-el-drag-dialog
    :title="type === 'add' ? '新增保单' : '编辑保单'"
    :visible.sync="visible"
    width="700px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-position="right" label-width="100px">
      <el-form-item label-width="0" prop="csmPhone">
        <el-input v-model="temp.csmPhone" placeholder="请输入">
          <el-select slot="prepend" v-model="temp.select" style="width: 100px;" placeholder="请选择">
            <el-option label="客户电话" :value="1" />
            <el-option label="客户名称" :value="2" />
            <el-option label="客户编码" :value="3" />
          </el-select>
          <el-button slot="append" class="append-search">查询</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="客户名称:" prop="csmName">
        <el-input v-model="temp.csmName" />
      </el-form-item>
      <el-form-item label="押金单号:" prop="orderCode">
        <el-input v-model="temp.orderCode" placeholder="请输入">
          <el-button slot="append" class="append-search">查询</el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="投保金额:" prop="price">
        <el-input v-model="temp.price" clearable @input="temp.price=temp.price.replace(/[^\d.]/g, '').replace(/^0\d+|^\./g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(.*\..{2}).*$/,'$1')" />
      </el-form-item>
      <el-form-item label="投保时间:" prop="time">
        <el-date-picker
          v-model="temp.time"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="投保地址:" prop="area" class="block">
        <el-cascader v-if="visible" ref="cascader" v-model="temp.address" style="width: 100%;" :props="addressProps" clearable />
      </el-form-item>
      <el-form-item prop="remark" class="block">
        <label slot="label">备注:</label>
        <el-input v-model="temp.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button :loading="$loadingPlugin.add || $loadingPlugin.edit" type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { selectAreaCode } from '@/api'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    name: 'add',
    data() {
      return {
        visible: false,
        type: 'add',
        temp: {
          address: [],
          select: 1,
          csmPhone: '',
          orderCode: '',
          csmName: '',
          addScores: '',
          price: '',
          time: '',
          remark: ''
        },
        rules: {
          csmPhone: [{ required: true, message: '请输入', trigger: 'change' }],
          csmName: [{ required: true, message: '请输入用户编码', trigger: 'change' }],
          orderCode: [{ required: true, message: '请输入押金单号', trigger: 'change' }],
          address: [{ required: true, message: '请选择投保地址', trigger: 'change' }],
          price: [{ required: true, message: '请输入投保金额', trigger: 'change' }]
        },
        addressProps: {
          checkStrictly: true,
          lazy: true,
          lazyLoad(node, resolve) {
            const { level, value } = node
            mergeAsyncFunc(selectAreaCode, { areaCode: value || 0 })
              .then((res) => {
                const nodes = res.data.map(item => ({
                  value: item.areaCode,
                  label: item.areaName,
                  leaf: level >= 3
                }))
                resolve(nodes)
              })
              .catch(() => {
                node.loading = false
                node.loaded = false
              })
          }
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp, {
              address: [temp.provinceCode, temp.cityCode, temp.countyCode, temp.streetCode]
            })
            this.type = 'edit'
          }
        })
      },
      success() {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          if (this.type === 'add') {
            this.add()
          } else {
            this.edit()
          }
        })
      },
      async add() {
        // await roleAdd(this.temp)
        this.resolve()
        this.visible = false
        this.$notify({
          title: '提示',
          message: '新增成功',
          type: 'success',
          duration: 2000
        })
      },
      async edit() {
        // await roleUpdate(this.temp)
        this.resolve(this.temp)
        this.visible = false
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.type = 'add'
        this.temp = {
          select: 1,
          csmPhone: '',
          orderCode: '',
          csmName: '',
          address: '',
          addScores: '',
          price: '',
          time: '',
          remark: ''
        }
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 50%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 20px;
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
</style>
